<template>
	<view class="backg-box">
		<!-- 主播顶端 -->
		<div class="top-box">
			<div class="header-box">
				<image :src="infoList.liver_head" mode="aspectFit" class="user"></image>
				<text class="title-size white-text" style="padding-left: 10rpx; padding-right: 20rpx;">{{infoList.liver_name}}</text>
				<div class="love" @click="lovely" >
					<text class="white-text" >{{love ? '已关注' : '未关注'}}</text>
				</div>
			</div>
			<div style="position: fixed;
						top: 71rpx;
						right: 120rpx;
						height: 50rpx; 
						line-height: 50rpx;
						background-color: rgba(0,0,0,0.42);
						border-radius: 30rpx;
						padding-left: 30rpx;
						padding-right: 30rpx;
						padding-bottom: 10rpx;
			">
				<text style="color: #FFFFFF; font-size: 26rpx; line-height: 50rpx;"> {{people_number}} 人</text>
			</div>
			<div  @click="onClickExitRoom()" style="position: fixed;
						top: 65rpx;
						right: 20rpx;
						 ">
				 <!-- 退出 -->
				 <image src="../../../../static/del1.png" mode="aspectFit" style=" width: 62rpx; height: 69rpx;"></image>
			</div>
		</div>
		<tx_live_room ref="roomView" :style="`width: 100%;height: ${screenHeight}px;`"></tx_live_room>
		<tx_live_room ref="linkView" style=""></tx_live_room>
	<!-- 	<button type="primary" style="position: fixed;bottom: 30px; right:10px"
			@click="onClickJoinAnchor()">请求连麦</button>
		<button type="primary" style="position: fixed;bottom:80px; right:10px"
			@click="onClickExitAnchor()">退出连麦</button>
		<button type="primary" style="position: fixed;bottom:30px; left:10px"
			@click="onClickSendMsg()">发送消息</button> -->
		<!-- <button type="primary" style="position: fixed;bottom:80px; left:10px"
			@click="onClickExitRoom()">退出房间</button> -->
		<list class="msg_box" :show-scrollbar="false" v-if="msgList.length > 0">
				<cell  v-for="(item,index) in msgList" :ref="`refMsg${index}`">
					<div class="cell-item">
						<image :src="image(item.userAvatar)" mode="aspectFit" class="user" style="margin-right: 14rpx;" v-if="item.userAvatar!= ''"></image>
						<image :src="defaultimg.default_headimg" mode="aspectFit" class="user" style="margin-right: 14rpx;" v-else></image>
						<text style="color: #FFD2C7; font-size: 28rpx;margin-top: 6px;">{{getName(item.userName, 5)}}:</text>
						<text class="fff-color">{{item.message}}</text> 
					</div>
					<div class="null" style="height: 20rpx;"></div>
				</cell>
		</list>
		<div style="position: fixed; left: 20rpx ; bottom: 24rpx;">
			<!-- <image src="" mode=""></image> -->
			<input type="text"  class="input-text"  style="" v-model="messages" placeholder="说点什么吧~"  placeholder-class="input-placeholder" maxlength="50" />
			<text style="position: fixed; left: 370rpx ;bottom: 24rpx; height: 72rpx; background-color: #FF4544; line-height:72rpx; color: #FFFFFF; border-radius: 40rpx; font-size: 26rpx; padding-left: 25rpx; padding-right: 25rpx; text-align: center;" @click="onClickSendMsg()">发送</text>
			 <image  v-if="goodsList.length>0" src="../../../../static/img1.png" mode="aspectFit" style=" width: 62rpx; height: 69rpx; position: fixed; right: 30rpx ; bottom: 24rpx;" @click="open()"></image>
		</div>
		
		<uni-popup ref="storePopup" type="bottom">
			<view class="store-box" style="height:600rpx">
				<view class="" style="flex-direction: row;  align-items: stretch; padding: 10rpx; ">
					<view class="" style="width: 6rpx; height: 29rpx; line-height: 29rpx; background-color: red; margin-top: 5rpx;">	</view>
					<text style="margin-left: 13rpx; font-size: 32rpx;">直播商品</text>
					<image src="../../../../static/close.png" mode="aspectFit" style=" width: 62rpx; height: 69rpx; position: absolute; right: 30rpx ; top: 1rpx;" @click="close()"></image>
				</view>
				<list class="simple-douyin-list common-scroll mar-top-20" style="border-top-left-radius: 15px!important;">
					<cell class="shopping" v-for="(goodsitem,goodsindex) in goodsList" :key="goodsindex">
						<view class="store-list" style="">
							<image :src="goodsitem.sku_image" mode="aspectFill" class="store-list-iamge" style=""></image>
							<view class="" style="flex: 1; justify-content: space-between; height: 150rpx;">
								<text style="font-size: 28rpx;">{{goodsitem.sku_name}}</text>
								<view class="" style="flex-direction: row; justify-content: space-between; align-items: flex-end;">
									<view class="" style="flex-direction: row; ">
										<text class="text-color-red" style="margin-left: 10rpx; margin-right: 10rpx; font-size: 32rpx; " >{{goodsitem.unit}}</text>
										<text class="text-color-red"  style="font-size: 32rpx;">{{goodsitem.price}}</text>
									</view>
									<view class="" style=" height: 50rpx; line-height: 50rpx; border-radius: 50rpx; margin-right: 20rpx; background-color: #FF4544" @click="toShops(goodsitem.sku_id)">
										<text style="color: #FFFFFF; 
													font-size: 26rpx;
													margin-top: 10rpx;
													margin-bottom: 10rpx;
													margin-left: 30rpx;
													margin-right: 30rpx; 
										">去购买</text>
									</view>
								</view>
							</view>
						</view>
					</cell>
				</list>
			</view>
		</uni-popup>

		
	</view>
</template>

<script>
	 const dom = uni.requireNativePlugin('dom')
	import Util from '../../../../common/js/util.js'
	import Http from '../../../../common/js/http.js'
	import Config from '../../../../common/js/config.js'
	import uniPopup from '@/components/uni-popup/uni-popup.vue';
	//LVB插件对象
	var sdkwx = uni.requireNativePlugin('TXMLVB-LiveRoom');
	export default {
		components: {
			uniPopup,
			Util
		},
		data() {
			return {
				msgList:[],//弹幕数组
				screenHeight: 0, //屏幕高度
				frontCamera: true, //默认摄像头
				startShow:true,//开始直播
				infoList:[],
				goodsList: [],
				// goodsList: [],
				Shows:false,//开播后
				message:'',
				
				roomID:0,//房间号
				messages: '', //弹幕
				userInfo:[],
				defaultimg:[],
				love:'',// 关注主播
				people_number:0,//直播人数
				live_id:0,//主播id
				interval : ''
			}
		},
		onLoad(options) {
			this.screenHeight=wx.getSystemInfoSync().screenHeight;
			this.defaultimg = Util.getDefaultImage();
			//设置事件回调
			var that = this;
			sdkwx.setListener(function(res){
				if (res.type == "onDebugLog") {
					return;
				}
				// let messages  = res.data.message
				// console.log(res,'111');//通过res.type == 'onXXX' 判断回调方法
				if (res.type == "onAnchorExit") {
					that.onAnchorExit(res.data);
				} else if (res.type == "onKickoutJoinAnchor") {
					that.onKickoutJoinAnchor(res.data);
				} else if (res.type == "onRoomDestroy") {
					that.onRoomDestroy();
				}else if (res.type == "onRecvRoomTextMsg") {
					console.log(res.data);
					//发送消息
					that.onRecvRoomTextMsg(res.data)
				}
			});
			// this.enterRoom()
			
			
			this.roomID =  options.roomID+''
			this.onRecvRoomTextMsg();
			this.roomInfoOpen()
		
			 
			this.init()
			
		},
		onShow() {
			setTimeout(() => {
				this.roomInfos()
				this.interval = setInterval(()=>{
				    this.getLivePelpleNumber()
					this.livetatus()
				},5000)
			}, 500);
		},
		mounted() {
		},
		onUnload() {
			//如果有连麦需要停止连麦
			this.roomInfoClose()
			// sdkwx.logout()
			
		},	
		methods: {
			getName(name, len){
				var disName =name;
				var shortName = disName.substring(0,len);
				if(name.length > 5){
				return shortName + '…';	
				}
				return shortName;
			},
			image(path){
				return Util.img(path);
			},
			
			// 初始化
			init(){
			
			},
			//监听主播下播
			livetatus(){
				let that = this
				Http.sendRequest({
					url: '/api/Memberliveplay/roomInfo',
					data: {
						 roomid: this.roomID
					},
					success: res => {
						console.log(res);
						if(res.live_status ==  102){	
							uni.showModal({
								title: '提示',
								content: '主播已下播',
								success: (res) => {
									
									Util.redirectTo('/otherpages/member/lives/index/live_finish?roomID='+ that.roomID,{})
									clearInterval(this.interval);
									console.log(1);
								}
							});
						}
						this.goodsList = res.goods_info;
					}
				})
			},
			
			// 
			roomInfos() {
				Http.sendRequest({
					url: '/api/Memberliveplay/roomInfo',
					data: {
						 roomid: this.roomID
					},
					success: res => {
						console.log(res);
						this.live_id = res.liver_id;
						if(res.live_status ==  102){	
							uni.showModal({
								title: '提示',
								content: '主播已下播',
							});
						}
						this.infoList = res
						this.goodsList = res.goods_info
						this.lovelyCheck();
					}
				})
				this.enterRoom()
				
			},	
			open() {
				this.$refs.storePopup.open()
			},
			close(){
				this.$refs.storePopup.close()
			},
			// 购买商品
			toShops(sku_id){
				uni.navigateTo({
				    url: '/pages/goods/detail/detail?sku_id=' + sku_id
				});
			},
			
			enterRoom() {
				var roomView = this.$refs.roomView;
				//进入房间
				let user = uni.getStorageSync('userInfo') ? uni.getStorageSync('userInfo') : {'nickname':'用户'};
				const name  = user.nickname
				console.log(this.roomID);
				roomView.enterRoom(this.roomID+'', function(res){
					console.log(res);
					//进入房间成功发送一条自定义消息
					sdkwx.sendRoomTextMsg( name + "进入房间了", function(res) {
						console.log("sendRoomTextMsg", res);
						
					});
				});
			},
			onClickExitRoom() {
				//退出房间
				var roomView = this.$refs.roomView;
				let user = uni.getStorageSync('userInfo') ? uni.getStorageSync('userInfo') : {'nickname':'用户'};
				const name  = user.nickname
				roomView.exitRoom(function(res){
					 
				});
				uni.navigateBack({
					delta:1,
					
				});
				this.roomInfoClose()
				// sdkwx.logout()
			},
			onClickJoinAnchor() {	
				var linkView = this.$refs.linkView;
				//请求连麦
				sdkwx.requestJoinAnchor("请求连麦", function(res){
					console.log(res);
					if (res.code == 0) {//接收
						//开启本地视频预览
						linkView.startLocalPreview(true);
						//加入连麦
						sdkwx.joinAnchor(function(res2){
							console.log(res2);
						});
					} else if (res.code == -8) {//拒绝
						
					} else {//错误超时
					
					}
				});
			},
			onAnchorExit(data) {
				var linkView = this.$refs.linkView;
				//停止远程视频view
				linkView.stopRemoteView();
			},
			onKickoutJoinAnchor(data){
				var linkView = this.$refs.linkView;
				//停止本地视频
				linkView.stopLocalPreview();
			},
			onClickExitAnchor() {
				//退出连麦
				var linkView = this.$refs.linkView;
				sdkwx.quitJoinAnchor(function(res){
					//停止本地视频
					linkView.stopLocalPreview();
					console.log("quitJoinAnchor", res);
				});
			},
			// 发送弹幕
			onClickSendMsg() {
				console.log(this.messages.trim());
				if (this.messages.trim() == '') {
					uni.showToast({
						icon: 'none',
						title: '输入内容不为空'
					})
					return false;
				}
				let user = uni.getStorageSync('userInfo') ? uni.getStorageSync('userInfo') : {'nickname':'用户','headimg': ''};
				const name  = user.nickname
				const headimg  = user.headimg
				let that = this
				let msg_data = {
					"message": this.messages,
					"userName": name,
					// "roomID": "71",
					"userID": uni.getStorageSync('live_uid'),
					"userAvatar": headimg
				};
				this.msgList.push(msg_data);
				if(this.msgList.length > 100) this.msgList.shift();
				this.sendMessage(this.messages);
				
				setTimeout(() => {
					this.$nextTick(()=>{  
						let index = this.msgList.length-1;
						let scrollToCell = this.$refs['refMsg'+index];
						if(scrollToCell){
							dom.scrollToElement(scrollToCell[0] , {});
						}
					})
				}, 200);
				
				
				this.messages = '';
			},
			// 接收弹幕
			onRecvRoomTextMsg(res){
				if(res){
					this.msgList.push(res);
					if(this.msgList.length > 100) this.msgList.shift();
					setTimeout(() => {
						this.$nextTick(()=>{  
							let index = this.msgList.length-1;
							let scrollToCell = this.$refs['refMsg'+index];
							if(scrollToCell){
								dom.scrollToElement(scrollToCell[0] , {});
							}
						})
					}, 200);
				}
			},
			
			onRoomDestroy() {
				uni.navigateBack({});
			},
			// 购物车
			toCart(){
				uni.navigateTo({
				   url: '/pages/goods/cart/cart'
				});
			},
			
			
			
			// 进入房间
			roomInfoOpen(){
				Http.sendRequest({
					url: '/api/Memberliveplay/roomInfoOpen',
					data: {
						roomid: this.roomID
					},
					success: res => {
						this.userInfo = res
					}
				})
			},
			// 退出房间
			roomInfoClose(){
				Http.sendRequest({
					url: '/api/Memberliveplay/roomInfoClose',
					data: {
						roomid: this.roomID
					},
					success: res => {
						console.log(res);
					}
				})
			},
			
			// 关注主播
			lovely(){
				let that = this;
				let url = that.love  ? '/api/Memberliveplay/roomFocusOut' : '/api/Memberliveplay/roomFocusIn';
				
				Http.sendRequest({
					url: url,
					data: {
						live_id: that.live_id
					},
					success: res => {
						if(res.data) that.love = !that.love;
					}
				})
			},
			// 用户是否关注主播
			lovelyCheck(){
				let that = this;
				console.log(that.live_id);
				Http.sendRequest({
					url: '/api/Memberliveplay/isFoucs',
					data: {
						live_id: that.live_id
					},
					success: res => {
						
						that.love = res.data ? true : false;
					}
				})
			},
			
			// 发送消息
			sendMessage(content){
				let that = this;
				console.log(that.live_id);
				Http.sendRequest({
					url: '/api/Memberliveplay/peopleSendMessage',
					data: {
						roomid: that.roomID,
						content :content,
					},
					success: res => {
						if(res.data){
							//发送消息
							sdkwx.sendRoomTextMsg(content, function(res) {
								that.messages = ''
							});
						}else {
							Util.showToast({
								title: res.message
							});
						}
					}
				})
			},
			
			/**
			 * 直播间人数
			 */
			getLivePelpleNumber(){
				Http.sendRequest({
					url: '/api/Memberliveplay/getLivePelpleNumber',
					data: {
						roomid: this.roomID
					},
					success: res => {
						this.people_number = res.data
						console.log(res);
					}
				})
				
				
			}
		}
	}
</script>

<style>
	.input-placeholder{
		color: #FFFFFF;
		font-size: 14rpx;
		/* text-indent：10rpx; */
	}
	.text-color-red{
		color: #FF4544!important; 
	}
	
	.backg-box {
		background-color: rgba(149,144,150,0.3);
		/* background-color: #000000; */
		/* background: url(../../../../static/download/bgi.png); */
	}
	
	.store-list {
		flex-direction: row;
		align-items: center;
		margin: 10rpx 0;
	}
	
	.store-list-iamge {
		width: 170rpx;
		height: 150rpx;
		padding-left: 10rpx;
		padding-right: 20rpx;
	}
	
	.store-box {
		width: 750rpx;
		padding: 20rpx;
		background-color: #FFFFFF;
		position: fixed;
		bottom: 0px;
		left: 0px
	}
	
	/* header */
	
	.top-box {
		/* display: flex; */
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}
	
	.user {
		width: 60rpx;
		height: 60rpx;
		border-radius: 50%;
	}
	
	.title-size {
		font-size: 20rpx;
	}
	.white-text{
		font-size: 28rpx;
		color: #FFFFFF;
	}
	
	.exit-box {
		position: fixed;
		top: 60rpx;
		right: 10rpx;
		font-size: 40rpx;
		color: #FFFFFF;
		font-size: 24rpx!important;
	}
	
	.header-box {
		position: fixed;
		top: 60rpx;
		left: 30rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		/* background-color: #9A9B9E; */
		background-color: rgba(0,0,0,0.5);
		/* background-color: rgba(0,0,0,0.6); */
		/* background-color: #07C160; */
		border-radius: 40rpx;
		padding: 5rpx 10rpx;
	}
	.love{
		background-color: #FF4544;
		border-radius: 35rpx;
		padding-left: 27rpx;
		padding-right: 27rpx;
		padding-bottom: 8rpx;
		padding-top: 8rpx;
	}
	.box-sizing {
		box-sizing: border-box;
	}
	
	.footer_box {
		/* position: fixed;
		bottom: 20rpx;
		margin: 0 20rpx;
		background-color: red; */
	}
	
	.footer_img {
		width: 70rpx;
		height: 70rpx;
		border-radius: 50%;
	}
	
	/* 弹幕 */
	.input-text{
		width: 332rpx;
		height: 72rpx; 
		background-color: rgba(149,144,150,0.3);
		border-radius: 50rpx;
		padding-left: 25rpx; 
		padding-right: 25rpx;
		color: #FFFFFF;
		font-size: 24rpx;
	}
	
	.msg_box{
		display: flex;
		flex-direction: column;
		position: fixed;
		bottom: 120rpx;
		max-height:600rpx;
		overflow-y:auto;
		left: 40rpx;
		background-color: rgba(0,0,0,0.1);
		padding: 20rpx 20rpx 3rpx 20rpx;
		border-radius: 10px;
	}
	
	.cell-item{
		max-width:492rpx;
		
		padding: 3rpx 20rpx 3rpx 3rpx;
		
		white-space:normal;
		display: flex;
		flex-direction: row;
		align-items: center;
		width: fit-content;
		align-items: flex-start;
	}
	.fff-color{
		color: #fff;
		font-size: 27rpx;
		line-height: 27rpx;
		margin-left: 19rpx;
		flex: 1;
		word-break: break-all;
		    margin-top: 9px;
	}
	
	.msg_box::-webkit-scrollbar{display: none;}
	
</style>
